<template>
  <div class="content-wrapper">
    <!-- <div class="content-header"></div>
     <div class="title">
      <div>待办事项中心</div>
    </div>
    <el-divider></el-divider> -->
    <div class="content-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="流程待办" name="FlowListTodo">
          <span slot="label"
            >流程待办<el-badge
              v-if="$store.state.message.flowCount > 0"
              class="my-mark"
              :value="$store.state.message.flowCount"
          /></span>

          <FlowListTodo />
        </el-tab-pane>
        <!-- <el-tab-pane name="read">
          <span
            slot="label"
          >培训待办<el-badge
            class="my-mark"
            :value="$store.state.message.trainCount"
          /></span>
          <TrainListTodo />
        </el-tab-pane>
        <el-tab-pane name="sumUp ">
          <span
            slot="label"
          >培训总结待办<el-badge
            class="my-mark"
            :value="$store.state.message.sumUpCount"
          /></span>
          <TrainSumUpTodo />
        </el-tab-pane> -->
        <el-tab-pane label="生产任务" name="apply">
          <el-table
            v-loading="listLoading"
            height="500"
            :data="list"
            highlight-current-row
          >
            <el-table-column
              label="产品项目"
              prop="productDictValue"
              min-width="100px"
            />
            <el-table-column
              label="产品子项"
              prop="subProductDictValue"
              min-width="100px"
            />
            <el-table-column
              label="生产工艺"
              prop="techDocumentName"
              min-width="100px"
            />
            <el-table-column
              label="批号"
              prop="batchCode"
              width="100px"
              align="center"
            />
            <el-table-column label="备注" prop="memo" min-width="100px" />
            <el-table-column
              label="下发人"
              prop="createUserName"
              width="100px"
            />
            <el-table-column label="下发时间" prop="sendTime" width="160px" />
            <!-- <el-table-column label="状态" prop="status" width="100px">
            <template slot-scope="{ row }">
              <el-tag v-if="row.status == 1" type="success">下发</el-tag>
              <el-tag v-if="row.status == 0" type="danger">未下发</el-tag>
              <el-tag v-if="row.status == 2" type="info">取消</el-tag>
            </template>
          </el-table-column> -->
            <el-table-column
              label="操作"
              align="center"
              width="80px"
              fixed="right"
            >
              <template slot-scope="{ row, $index }">
                <el-dropdown trigger="click" class="filter-item">
                  <el-button type="text" class="el-icon-more" />
                  <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item @click.native="viewFile(row)"
                      >查看</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="addManufactureRecord(row)"
                      >开始记录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="生产记录审核" name="second">
          <el-table
            v-loading="listLoading"
            height="500"
            :data="qaPageList"
            highlight-current-row
          >
            <el-table-column
              label="产品项目"
              prop="productDictValue"
              min-width="200px"
            />
            <el-table-column
              label="产品子项"
              prop="subProductDictValue"
              min-width="200px"
            >
              <template slot-scope="{ row }">
                {{ row.subProductDictValue || '没有子项' }}
              </template>
            </el-table-column>
            <el-table-column
              label="批号"
              prop="batchCode"
              width="150px"
              align="center"
            />
            <el-table-column
              label="提交人"
              prop="checkUserName"
              width="100px"
            />
            <el-table-column label="提交时间" prop="createTime" width="160px" />
            <el-table-column
              label="操作"
              align="center"
              width="150px"
              fixed="right"
            >
              <template slot-scope="{ row }">
                <el-dropdown trigger="click" class="filter-item">
                  <el-button type="text" class="el-icon-more" />
                  <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item @click.native="getView(row)"
                      >查看</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="pushCheck(row)"
                      >审核通过</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="生产记录修改申请" name="third">
          <el-table
            v-loading="listLoading"
            height="500"
            :data="modifyList"
            highlight-current-row
          >
            <el-table-column
              label="产品项目"
              prop="productDictValue"
              min-width="100px"
            />
            <el-table-column
              label="产品子项"
              prop="subProductDictValue"
              min-width="100px"
            >
              <template slot-scope="{ row }">
                {{ row.subProductDictValue || '没有子项' }}
              </template>
            </el-table-column>
            <el-table-column
              label="批号"
              prop="batchCode"
              width="100px"
              align="center"
            />
            <el-table-column
              label="申请人"
              prop="createUserName"
              width="100px"
            />
            <el-table-column label="申请原因" prop="reason" min-width="100px" />
            <el-table-column label="申请时间" prop="createTime" width="160px" />
            <el-table-column
              label="操作"
              align="center"
              width="80px"
              fixed="right"
            >
              <template slot-scope="{ row }">
                <el-dropdown trigger="click" class="filter-item">
                  <el-button type="text" class="el-icon-more" />
                  <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <!-- <el-dropdown-item>查看</el-dropdown-item> -->
                    <el-dropdown-item @click.native="modificationStatus(row)"
                      >同意修改</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="批生产列表" :visible.sync="viewDialog">
      <el-table :data="dataList.data">
        <el-table-column
          property="productDictValue"
          label="产品项目"
          width="150"
        />
        <el-table-column
          property="subProductDictValue"
          label="产品子项"
          width="200"
        />
        <el-table-column property="batchCode" label="批号" />
        <el-table-column
          property="status"
          label="状态"
          :formatter="
            (row, column, cellValue, index) => {
              return recordStatus[cellValue]
            }
          "
        />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" type="success" @click="viewRecordFile(row)"
              >查看文件</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- <Pagination
      v-show="total > 0"
      :total="total"
      :page-number.sync="listQuery.pageNumber"
      :page-size.sync="listQuery.pageSize"
      @pagination="getList"
    /> -->
  </div>
</template>

<script>
// import TrainListTodo from '@/views/train/train_list_todo/index.vue'
import { pageTodoCount } from '@/api/xd/documentFlow'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import FlowListTodo from '@/views/flow/flow_list_todo/index.vue'
// import TrainSumUpTodo from '@/views/train/train_sumUpTodo/index.vue'
import {
  pageReleased,
  modifyRecordPage,
  updateModificationStatus,
  getQaPage,
  viewLotProduction,
  pushCheck
} from '@/api/rs/manufacture.js'
import { get } from '@/api/rs/technique.js'
import { save } from '@/api/rs/manufactureRecord.js'

export default {
  computed: {
    ...mapGetters(['menusMap', 'roles'])
  },
  components: { Pagination, FlowListTodo },
  data() {
    return {
      list: [],
      activeTab: 'FlowListTodo',
      listLoading: false,
      pageList: [{}],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        status: 1
      },
      total: 0,
      tableSelect: null,
      modifyList: [],
      qaPageList: [],
      dataList: {},
      viewDialog: false,
      status: {
        0: '未下发',
        1: '下发',
        2: '已取消'
      },
      recordStatus: {
        0: '未记录',
        1: '记录中',
        2: '记录异常',
        3: '提交修改',
        4: '提交批生产记录'
      }
    }
  },
  watch: {
    activeTab() {
      // this.getList()
    }
  },
  mounted() {
    // this.getList()
    console.log(this.$store.state.message, '$store.state.message')
  },
  methods: {
    // async getList() {
    //   await pageTodoCount()
    //     .then((res) => {
    //       this.$store.commit('message/FLOW_COUNT', res.data)
    //       console.log(res.data)
    //     })
    //     .finally(() => {
    //       this.listLoading = false
    //     })
    // },
    addManufactureRecord(row) {
      // 开始生产记录
      const requestData = {
        manufactureApplyId: row.manufactureApplyId,
        productDictCode: row.productDictCode,
        subProductDictCode: row.subProductDictCode,
        batchCode: row.batchCode,
        techniqueId: row.techniqueId
      }
      save(requestData).then((res) => {
        // 跳转我的记录页面
        this.$router.push('/manufacture/manufacture_list_record')
      })
    },
    viewRecordFile(row) {
      // 查看记录文档
      console.log(row, 'row')

      window.open(
        'onlyoffice/createDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          row.dataRecordId +
          '&mode=view' +
          '&urldata=' +
          process.env.VUE_APP_BASE_API
      )
    },
    viewFile(row) {
      // 查看文档
      get({ techniqueId: row.techniqueId }).then((res) => {
        window.open(
          'onlyoffice/createDocument.html?&token=' +
            this.$store.getters.token +
            '&documentId=' +
            res.data.documentId +
            '&mode=view' +
            '&urldata=' +
            process.env.VUE_APP_BASE_API
        )
      })
    },
    // 分页
    getDataList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageReleased(this.listQuery).then((res) => {
        this.list = res.data.rows
        this.total = res.data.total
      })
      getQaPage(this.listQuery).then((res) => {
        this.qaPageList = res.data.rows
        this.total = res.data.total
      })
      modifyRecordPage(this.listQuery).then((res) => {
        this.modifyList = res.data.rows
        this.total = res.data.total
      })
    },
    // 修改状态
    modificationStatus(row) {
      const manufactureRecordModifyApplyId = Number(
        row.manufactureRecordModifyApplyId
      )
      const data = {
        manufactureRecordModifyApplyId: manufactureRecordModifyApplyId,
        status: 1
      }
      updateModificationStatus(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getDataList()
        }
      })
    },
    // 查看Qa审核
    async getView(row) {
      this.viewDialog = true
      const data = { manufactureArchiveId: row.manufactureArchiveId }
      this.dataList = await viewLotProduction(data)
    },
    // 提交qa审核
    pushCheck(row) {
      const data = {
        manufactureArchiveId: row.manufactureArchiveId
      }
      pushCheck(data).then((res) => {
        if (res.code == 1) {
          this.$message.success('提交成功')
          this.getDataList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.my-mark {
  // margin-top: 10px;
  .sup {
    top: -1.5em;
  }
}
</style>
